// 高阶组件的定义：本质是一个组件，接受一个组件作为参数，返回一个新的组件
import { Component } from 'react'

// 高阶组件的使用方式有两种
    // 1.属性代理，增强组件的能力
    // 2.反向继承，高阶组件可以复用

// 缺点
// 1.高阶组件笨重且难以理解
// 2.容易造成嵌套地狱(wrapper)
// 3.对 Typescript 类型化也不友好
const SuitHoc = WrapComponent => {
    // 1.属性代理，增强组件的能力
    return class w extends Component {
        state = {
            weapon:'如意神剑',
            skill:'一刀两断,如意神剑',
            nickname:'小救星小杜'
        }
        render(){
            return(
                <fieldset>
                    <legend>高阶组件</legend>
                    <WrapComponent {...this.state}/>
                </fieldset>
            )
        }
    }

    
    // 2.反向继承，高阶组件可以复用
    // return class w extends WrapComponent {
    //     // state = {
    //     //     weapon:'如意神剑',
    //     //     skill:'一刀两断,如意神剑',
    //     //     nickname:'小救星小杜'
    //     // }
    //     render(){
    //         console.log(this.state );
    //         return(
    //             <fieldset>
    //                 <legend>高阶组件</legend>
    //                 <WrapComponent/>
    //             </fieldset>
    //         )
    //     }
    // }
}
export default SuitHoc